<script setup>
import { onActivated, onDeactivated, reactive ,ref} from 'vue';
import Demo23 from './Demo23.vue'
import { computed } from 'vue';
const list1=reactive([{state:true,name:"打1"},
    {state:true,name:"打2"},
    {state:false,name:"晨勃3"},
    {state:true,name:"打飞机"}
])
onActivated(()=>{
  console.log("被激活了")  
})
onDeactivated(()=>{
    console.log("demo22被缓存了")
})

const str=ref('')
const lx=ref(0)
const add=()=>{
    console.log("已经添加")
    list1.push({state:false,name:str.value})
}
const countActive=computed(()=>{
     return list1.filter(item=>{return item.state==false}).length
})
const list=computed(()=>{
    if(lx.value==1){
        return list1.filter(item=>{return item.state==false})
    }
    else if (lx.value==2){
        return list1.filter(item=>{return item.state==false})
    }
    else 
        return list1
})
import { onUnmounted,onMounted} from "vue"
onMounted(()=>{
  console.log("待办事项页面挂载")  
})
onUnmounted(()=>{console.log("待办事项页面销毁")})
</script>
<template>
    <h3>代办事项{{lx}}</h3>
    <input type="text" class="inputA" placeholder="请填写任务" v-model="str" @keyup.enter="add" />
    <div v-for="(item,index) in list" :key="index">
        <div class="div1"  @click="item.state=!item.state">
            <Demo23 :state="item.state"/>
            &nbsp;{{item.name}}
            <img src="/public/no.png">
        </div>

    </div>
    <div class="div1 div2">
        <span>共{{countActive}}条未完成任务</span>
        <div>
            <button @click="lx=0">all</button>
            <button @click="lx=1">Active</button>
            <button @click="lx=3">Completed</button>
        </div>
    </div>
</template>
<style scoped>
h3{
    text-align: center;
    margin-bottom: 20px;
}
.inputA{
     width: 100%;
     padding:  5px 10px;
     outline:none;
     border: 1px solid lightgrey;
     box-sizing: border-box;
}
img{
    width: 20px;

}
img:hover{
    cursor: pointer;
}
.div1{
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    border-bottom:  1px solid black;
    padding: 0px 10px;
}
.div2{
    border: 0px;
}
button{
    margin-left: 5px;
    background-color: white;
    border: 1px solid lightgray;
    padding:  2px 5px;
    border-radius: 5px;
}
button:hover{
    cursor: pointer;
    background-color: aqua;
}
.div3{
    display: flex;
    align-content: center;
}
</style>